<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
  <!-- sidebar: style can be found in sidebar.less -->
  <section class="sidebar">
    <!-- Sidebar user panel (optional) -->
    <div *ngIf="display_menu_user" class="user-panel">
      <div class="pull-left image" *ngIf="currentUser?.avatarUrl">
        <img [src]="currentUser?.avatarUrl" class="img-circle"
             [alt]="currentUser?.getName()">
      </div>
      <div class="pull-left info">
        <p>{{currentUser?.getName()}}</p>
        <!-- Status -->
        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
      </div>
    </div>
    <!-- search form (Optional) -->
    <!--<form *ngIf="display_menu_search" action="#" method="get" class="sidebar-form">-->
    <!--<div class="input-group">-->
    <!--<input type="text" name="q" class="form-control"-->
    <!--placeholder="Search..."> <span class="input-group-btn">-->
    <!--<button type="submit" name="search" id="search-btn"-->
    <!--class="btn btn-flat">-->
    <!--<i class="fa fa-search"></i>-->
    <!--</button>-->
    <!--</span>-->
    <!--</div>-->
    <!--</form>-->
    <!-- /.search form -->
    <!-- Sidebar Menu -->
    <ul class="sidebar-menu" data-widget="tree">
      <!-- DEPRECATED since 1.0.1 -->
      <ng-container *ngIf="menu_title !== '' ">
        <li class="header">{{menu_title}}</li>
      </ng-container>
      <!-- /DEPRECATED since 1.0.1 -->
      <ng-container *ngFor="let item of links">
        <!-- HEADER -->
        <ng-container *ngIf="item.header">
          <li class="header">{{item.header}}</li>
        </ng-container>
        <!-- COMPONENT -->
        <!--<ng-container *ngIf="item.class">-->
        <!--<li>-->
        <!--<app-component-loader [class_component]="item.class" [data]="item.data"></app-component-loader>-->
        <!--</li>-->
        <!--</ng-container>-->
        <!-- LINK -->
        <ng-container *ngIf="item.link">
          <li [class.active]="item.link[0] === currentUrl">
            <a *ngIf="!item.external" [routerLink]="item.link">
              <i class="fa fa-{{item.icon}}"></i>
              <span>{{item.title}}</span>
            </a>
            <a *ngIf="item.external" [href]="item.link" [target]="item.target">
              <i class="fa fa-{{item.icon}}"></i>
              <span>{{item.title}}</span>
            </a>
          </li>
        </ng-container>
        <!-- LINK WITH SUBLINKS -->
        <ng-container *ngIf="item.sublinks">
          <li class="treeview">
            <a href="#">
              <i *ngIf="item.icon" class="fa fa-{{item.icon}}"></i>
              <span>{{item.title}}</span>
              <span class="pull-right-container">
								<i class="fa fa-angle-left pull-right"></i>
							</span>
            </a>
            <ul class="treeview-menu">
              <ng-container *ngFor="let subitem of item.sublinks">
                <li [class.active]="subitem.link[0] === currentUrl">
                  <ng-container *ngIf="!subitem.sublinks">
                    <a *ngIf="!subitem.external" [routerLink]="subitem.link">
                      <i *ngIf="subitem.icon" class="fa fa-{{subitem.icon}}"></i>
                      <span>{{subitem.title}}</span>
                    </a>
                    <a *ngIf="subitem.external" [href]="subitem.link" [target]="subitem.target">
                      <i *ngIf="subitem.icon" class="fa fa-{{subitem.icon}}"></i>
                      <span>{{subitem.title}}</span>
                    </a>
                  </ng-container>

                </li>
                <ng-container *ngIf="subitem.sublinks">
                  <li class="treeview">
                    <a href="#">
                      <i *ngIf="subitem.icon" class="fa fa-{{subitem.icon}}"></i>
                      <span (click)="routeParams(subitem.title)">{{subitem.title}}</span>
                      <span class="pull-right-container">
                        <i class="fa fa-angle-left pull-right"></i>
                      </span>
                      <!--i class="fa fa-angle-left pull-right"></i-->
                    </a>
                    <ul class="treeview-menu">
                      <ng-container *ngFor="let subitem2 of subitem.sublinks">
                        <li [class.active]="subitem2.link[0] === currentUrl">
                          <a *ngIf="!subitem2.external" [routerLink]="subitem2.link">
                            <i *ngIf="subitem2.icon" class="fa fa-{{subitem2.icon}}"></i>
                            <span>{{subitem2.title}}</span>
                          </a>
                          <a *ngIf="subitem2.external" [routerLink]="subitem2.link" [target]="subitem2.target">
                            <i *ngIf="subitem2.icon" class="fa fa-{{subitem2.icon}}"></i>
                            <span>{{subitem2.title}}</span>
                          </a>
                        </li>
                      </ng-container>
                    </ul>
                  </li>
                </ng-container>
              </ng-container>
            </ul>
          </li>
        </ng-container>
      </ng-container>
    </ul>
    <!-- /.sidebar-menu -->
  </section>
  <!-- /.sidebar -->
</aside>
